<template>
	<div class="home">
		<div class="home__top" style="justify-content: space-between;align-items: center;">
			<div style="display: flex;align-items: center;">
				<div class="home__top__btn" v-for='(item,index) in btnlist' :key="index" :style="{background:item.bgc}">
					{{item.text}}</div>
			</div>
			<div style="display: flex;align-items: center;">
				<div style="width: 208px;margin-left: 34px;height: 36px;display: flex;align-items: center;">
					<el-input v-model="input" placeholder="搜索"></el-input>
				</div>
				<img src="~@/assets/icon.png" style="width: 42px;height: 36px;margin-left: 5px;" alt="" />
			</div>
		</div>
		<div class="home__con">
			<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(100% - ${footerh}px)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A"}' :cell-style="{color:'#1F163A'}">
				<el-table-column type="index" label="行" width="56">
				</el-table-column>
				<el-table-column prop="bm" label="产品编号" width="124">
				</el-table-column>
				<el-table-column prop="name" label="产品名称" width="209">
				</el-table-column>
				<el-table-column prop="unit" label="单位" width="65">
				</el-table-column>
				<el-table-column prop="bz" label="备注" width="65">
				</el-table-column>
				<el-table-column prop="ys" label="颜色" width="65">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.ys"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="size" label="尺码" width="65">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.size"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="fdw" label="辅单位" width="80">
				</el-table-column>
				<el-table-column prop="hsl" label="换算率" width="80">
				</el-table-column>
				<el-table-column prop="gdhs" label="固定换算" width="98">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.gdhs"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="hsxs" label="换算系数" width="98">
				</el-table-column>
				<el-table-column prop="sj" label="售价" width="65">
				</el-table-column>
				<el-table-column prop="bm" label="产品编号" width="124">
				</el-table-column>
				<el-table-column prop="name" label="产品名称" width="209">
				</el-table-column>
				<el-table-column prop="ys" label="颜色" width="65">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.ys"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="ys" label="颜色" width="65">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.ys"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="pes.val" label="配色" width="65">
					<template slot-scope="scope">
						<div class="box" :style="{background:scope.row.pes.c}">
							{{scope.row.pes.val}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="pm.val" label="配码" width="65">
					<template slot-scope="scope">
						<div class="box" :style="{background:scope.row.pm.c}">
							{{scope.row.pm.val}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="fdw" label="辅单位" width="80">
				</el-table-column>
				<el-table-column prop="hsl" label="换算率" width="80">
				</el-table-column>
				<el-table-column prop="gdhs" label="固定换算" width="98">
				</el-table-column>
				<el-table-column prop="hsxs" label="换算系数" width="98">
				</el-table-column>
				<el-table-column prop="sj" label="售价" width="65">
				</el-table-column>
				<el-table-column prop="hsxs" label="换算系数" width="98">
				</el-table-column>
				<el-table-column prop="hsxs" label="换算系数" width="98">
				</el-table-column>
			</el-table>
			<div class="footer" ref="footer">
				<div>
					显示第1到第22条记录，总共 3272 条记录
				</div>
				<el-pagination background layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				btnlist: [{
					text: '定义列名'
				}, {
					text: '全部上传'
				}, {
					text: '全部下载'
				}, {
					text: '导入信息'
				}, {
					text: '扩展信息'
				}, {
					text: '尺码表'
				}, {
					text: '颜色表'
				}, {
					text: '结构'
				}, {
					text: '成本'
				}, {
					text: '分类'
				}, {
					text: '全部'
				}, ],
				tableData: [{
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, {
					bm: '10101001',
					name: '织带: XM001/1.8肩带',
					unit: '罗',
					bz: '无',
					ys: true,
					size: true,
					fdw: '米',
					hsl: '0.0076',
					gdhs: true,
					hsxs: '1',
					sj: 10,
					pes: {
						val: 7,
						c: '#4A77F6'
					},
					pm: {
						val: 1,
						c: '#18BC9C'
					},
				}, ],
				footerh:67
			}
		},
		created() {
			// this.
		},
		mounted() {
			this.footerh=this.$refs.footer.offsetHeight
			console.log(this.footerh)
		},
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		border-radius: 5px;
		padding: 13px 10px;

	}

	.home__top {
		display: flex;
		align-items: center;

	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: calc(100% - 50px);
	}

	/deep/.el-table .cell {
		text-align: center !important;
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}
	.footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 48px;
	}
</style>